import { Card, Row, Col, Avatar, Button, Upload, message } from "antd";
import { useContext, useState } from "react";
import { LoginStateContext } from "../../router";
import config from "../../../config.json";
import ImgCrop from "antd-img-crop";


export function UserSpaceApp() {
    const user = useContext(LoginStateContext);
    const [loading, setLoading] = useState(false)

    return (
        <div style={{ minHeight: "100vh" }}>
            <Card
                title="个人信息"
                style={{
                    width: 800,
                    margin: "auto"
                }}
            >
                <Row align="middle">
                    <Col>
                        <Avatar
                            src={user.userData.portrait}
                            size={96}
                            style={{
                                border: "1px solid #ccc"
                            }}
                        ></Avatar>
                        <UpCover />
                    </Col>
                </Row>
                <Row align="middle">
                    <Col>
                        用户名：
                    </Col>
                    <Col>
                        {user.userData.username}
                    </Col>
                </Row>
                <Row align="middle">
                    <Col>
                        电话：
                    </Col>
                    <Col>
                        {user.userData.phone}
                    </Col>
                    <Col>
                        <Button type="link" size="small">绑定</Button>
                    </Col>
                </Row>
                <Row align="middle">
                    <Col>
                        e-mail：
                    </Col>
                    <Col>
                        {user.userData.email}
                    </Col>
                    <Col>
                        <Button type="link" size="small">绑定</Button>
                    </Col>
                </Row>
            </Card>
        </div>
    )
}

function UpCover() {
    const [loading] = useState(false);
    const uploadButton = <Button type="link" loading={loading}>更改</Button>

    return (
        <>
            <ImgCrop rotate shape="round">
                <Upload
                    action={config.requestUrl + "/ttms/user/inform/updatePortrait"}
                    headers={{
                        "token": (sessionStorage.getItem("user-token") || localStorage.getItem("user-token")) as string
                    }}
                    showUploadList={false}
                    name="file"
                    maxCount={1}
                    onChange={(e) => {
                        if (e.file.status === "done") {
                            if (e.file.response.data) {
                                message.success("上传成功");
                            } else {
                                message.error(e.file.response.msg)
                            }
                        }
                    }}
                >
                    {uploadButton}
                </Upload>
            </ImgCrop>
        </>
    )
}